<template>
    <el-card shadow="never">
        <div class="mySpace">

            <!--  图片 -->
            <el-image style="width: 250px;border: 1px lightgray solid;margin-right: 3%;text-align: center;"
                :src="info.cover" fit="cover">
                <template #error>
                    <div style="width: 222px; height: 300px;font-size: 30px;margin: auto;line-height: 300px;">
                        <el-icon>
                            <Picture />
                        </el-icon>
                    </div>
                </template>
            </el-image>

            <!-- 信息 -->
            <el-card style="border: none;flex-basis: 60%;" shadow="never">
                <el-descriptions :column="1" size="large">
                    <template #title>
                        <span style="font-size: 28px;">{{ info.name }}</span>
                    </template>
                    <el-descriptions-item label="类型:">
                        <el-text>{{ info.types.join(" ") }}</el-text>
                    </el-descriptions-item>
                    <el-descriptions-item label="作者:">
                        <el-text>{{ info.authors.join(" ") }}</el-text>
                    </el-descriptions-item>
                    <el-descriptions-item label="更新状态:">
                        <el-text v-if="info.updateStatus === 1">连载中...</el-text>
                        <el-text v-else-if="info.updateStatus === 2">完本</el-text>
                    </el-descriptions-item>
                    <el-descriptions-item label="简介:">
                        <el-text>{{ info.synopsis }}</el-text>
                    </el-descriptions-item>
                </el-descriptions>

                <el-col style="margin-top: 20px;">
                    <el-button @click="goWatcher(chapterList[0])" type="primary" class="btn">在线阅读 </el-button>
                    <el-button @Click="drawer = true" type="primary" class="btn" plain>
                        <el-icon><Download /></el-icon>
                        <span>下载本书</span>
                    </el-button>
                </el-col>
            </el-card>

        </div>
    </el-card>

    <!-- 章节列表 -->
    <el-card style="margin-top: 10px;" shadow="never">
        <template #header>
            <el-text style="font-size: 24px;color: black;">章节列表</el-text>
        </template>

        <el-space wrap :size="15">
            <el-tooltip v-for="chapter in chapterList" effect="light" :content="chapter" placement="top"
                show-after="500">
                <el-button class="item" @click="goWatcher(chapter)">
                    <el-text style="width: 200px;line-height: normal;" truncated>{{ chapter }}</el-text>
                </el-button>
            </el-tooltip>
        </el-space>

    </el-card>

    <!-- 下载列表 -->
    <el-drawer v-model="drawer" :show-close="false">

        <template #header>
            <h1 style="text-align: center;font-size: 22px;color: black;">下载列表</h1>
        </template>

        <el-space wrap :size="15">
            <el-tooltip v-for="chapter in chapterList" effect="light" :content="chapter" placement="top"
                show-after="500">
                <el-button class="item" @click="goDownload(chapter)" style="width: 95px;">
                    <el-text style="width: 80px;line-height: normal;" truncated>{{ chapter }}</el-text>
                </el-button>
            </el-tooltip>
        </el-space>
    </el-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue';


const drawer = ref(false)

defineProps({
    info: {
        type: Object,
        required: true,
    },
    chapterList: {
        type: Array,
        required: true,
    },
    goWatcher: {
        type: Function,
        required: true,
    },
    goDownload: {
        type: Function,
        required: true,
    }
})


</script>


<style scoped>
/* .d-item {
    font-size: 14px;
    text-align: center;
} */

.btn {
    height: 50px;
    font-size: 18px;
    width: 180px;
    margin: 5px;
}

.item {
    width: 230px;
    height: 45px;
}

.mySpace {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
</style>